import Experience from './experience/Experience';

import './style.css';

/** @type{HTMLElement} */
const appDom = document.querySelector('#app');
if(appDom){

  const imgList: string[] = [
    '/textures/1.jpg',
    '/textures/2.jpg',
    '/textures/3.jpg',
    '/textures/4.jpg',
    '/textures/5.jpg',
  ];

  appDom.innerHTML = `
  <div id="sketch"></div>
<div class="loader-screen">
    <div class="loading-container">
        <div class="loading">
            <span style="--i: 0">L</span>
            <span style="--i: 1">O</span>
            <span style="--i: 2">A</span>
            <span style="--i: 3">D</span>
            <span style="--i: 4">I</span>
            <span style="--i: 5">N</span>
            <span style="--i: 6">G</span>
        </div>
    </div>
</div>
<div class="gallery">
    <img class="gallery-item" src="${imgList[0]}" crossorigin="anonymous" alt="" />
    <img class="gallery-item" src="${imgList[1]}" crossorigin="anonymous" alt="" />
    <img class="gallery-item" src="${imgList[2]}" crossorigin="anonymous" alt="" />
    <img class="gallery-item" src="${imgList[3]}" crossorigin="anonymous" alt="" />
    <img class="gallery-item" src="${imgList[4]}" crossorigin="anonymous" alt="" />
</div>
  `;
}

new Experience('#sketch');